<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style type="text/css">
 body {
   overflow: hidden;
 }
 .obj {
 	position: absolute;
 }
</style>
<script type="text/javascript">
var objects = $();
var doMoveEye = false;
var viewport_width = 0;
var viewport_height = 0;
var centerx = 0;
var centery = 0;
var mosx = 0;
var i=0;
var mosy = 0;
var nowx = 0;
var nowy = 0;
var damp = 3;
var viewz = 0;
var eyez = 300;
var colors = ['#008cba', '#d40000', '#3b5998'];
function updateViewport(){
  viewport_width = $(window).width();
  viewport_height = $(window).height();
}
$(function (){

  updateViewport();
  centerx = viewport_width/2;
  centery = viewport_height/2;
  var count = 100;
  for (i=0; i<count; i++){
	createNew();
  }

  $('body').
  	css("height", "100%").
  mousedown(function (e){
    mosx = e.pageX;
    mosy = e.pageY;
    doMoveEye = true;
  }).
  mouseup(function (){
    doMoveEye = false;
  }).
  mousemove(function (e){
    nowx = e.pageX;
    nowy = e.pageY;
  });
});
function createNew(){
    var y = Math.random()*viewport_height;
    var x = Math.random()*viewport_width;

    var newDiv = $('<div />').
    	  addClass('obj').
		  data("ballx", x - centerx).
		  data("bally", y - centery).
		  data("ballz", -(i*50)).
		  css({
			'background-color' : colors[Math.floor(Math.random() * colors.length)]
		  }).
		  appendTo($("body")).
		  each(make3d);
	objects = objects.add(newDiv);

}
$(function (){
  create();
});
function create(){
  setTimeout(onEnterFrame, 15);
}

function onEnterFrame(e){
  // if were moving the viewport
  if (doMoveEye){
      objects.each(make3d);
  }
  setTimeout(onEnterFrame, 15);
}
function make3d(){

    obj = this;

	var self = $(obj);
	var _x = self.data("ballx") + (-1 * (nowx - mosx) / damp);
	var _z = self.data("ballz") + (-1 * (nowy - mosy) / damp);

	self.data("ballx", _x);
	self.data("ballz", _z);

	var p = Math.max(0, -eyez / (_z - eyez));

    _x = _x * p + centerx;
	var _y = self.data("bally") * p + centery;

	var size = Math.floor(50 * p);

	var half_size = size / 2;

	self.css({
	  'top' : Math.floor(_y-half_size),
	  'left' : Math.floor(_x-half_size),
	  'width' : size,
	  'height' : size,
	  'opacity' : Math.max(0, Math.min(p, 1)),
	  'z-index' : Math.floor(p*1000)
	});

	if (_z > 600){
		self.remove();
		i++;
		createNew();
	}
}
</script>

</head>
<body>


</body>
</html>